const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {

    mode: "development",
    // webpack 提供了 entry 属性，用来配置每一个 HTML 页面的入口 JS 文件：
    entry: {
        login: "./src/js/login/login.js",
        list: "./src/js/list/list.js",
        addrelease: "./src/js/addrelease/addrelease.js",
        update: "./src/js/update/update.js",
    },
    output: {
        // 设置打包后的代码存储路径
        path: path.resolve(__dirname, 'dist'),
        // 设置打包后的文件名
        filename: 'js/[name].js'
    },
    plugins: [
        htmlPlugin('login'),
        htmlPlugin('list'),
        htmlPlugin('addrelease'),
        htmlPlugin('update'),
        new MiniCssExtractPlugin({
            // 打包后的 css 路径和文件名
            filename: './css/[name].css'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, './src/utils'),
                    to: "utils"
                },
            ],
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'css/layui/font'
                }
            },
            // css 中的图片
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 以下的图片采用 base64 进行处理
                            outputPath: './images/',  // 打包后图片的存储路径
                            esModule: false
                        }
                    }
                ]
            },
            // html 中的图片
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        port: 7000,
        open: true, // 启动服务器时自动打开页面
        hot: true, // 热更新
        openPage: "list.html",
        host: '192.168.13.6',
        // proxy: {
        //     '/': {
        //         target: 'http://localhost:8000'  // 后端服务器地址
        //     }
        // }
    }
}


function htmlPlugin(filename) {
    return new HtmlWebpackPlugin({
        template: `./src/${filename}.html`, // 设置要打包的源文件 HTML 的路径
        filename: `./${filename}.html`, // 设置打包后的文件路径和文件名
        chunks: [`${filename}`]  // 当前 HTML 文件中引入的 JS 的名字 
    })
}